<h2>{{ challenge?.name }} {{ romanNum }}</h2>

<p>
  <strong class="inline-title">Win Condition:</strong>
  <span class="inline-sub-title">
    Defeat enemy level
    <strong class="monospace">{{ challenge.nextLevel | format }}</strong>
  </span>
</p>

<strong class="desc-title">Description:</strong>
<p>{{ challenge?.description }}</p>

<strong>Rewards:</strong>
<ul>
  <li *ngIf="challenge.experiencePerCompletions > 0">
    <span class="monospace"
      >{{ challenge.experiencePerCompletions | format: true }} </span
    >experience per completions
  </li>
  <li *ngFor="let reward of challenge.rewards">{{ reward }}</li>
</ul>

<p>
  <strong>
    Completions:
    <strong class="monospace">{{ challenge?.quantity | format: true }}</strong>
  </strong>
</p>
<p>
  <strong class="inline-title">Unlock Condition:</strong>
  <span class="inline-sub-title">
    Defeat enemy level
    <span class="monospace">{{ challenge.unlockLevel | format }}</span>
  </span>
</p>

<nz-button-group>
  <button
    *ngIf="this.challenge.unlocked && !ms.game.challengeManager.activeChallenge"
    nz-button
    nzType="primary"
    nzSize="large"
    [disabled]="ms.game.challengeManager.activeChallenge"
    (click)="startChallenge()"
    nz-tooltip
    [nzTooltipTitle]="
      ms.game.challengeManager.activeChallenge
        ? 'You are already in a challenge'
        : ''
    "
  >
    <span>Start {{ challenge?.name }}</span>
  </button>
  <button
    *ngIf="
      this.challenge.unlocked &&
      ms.game.challengeManager.activeChallenge &&
      ms.game.challengeManager.activeChallenge !== this.challenge
    "
    nz-button
    nzType="primary"
    nzDanger
    nzSize="large"
    (click)="stopStartChallenge()"
    nz-tooltip
    [nzTooltipTitle]="
      ms.game.challengeManager.activeChallenge
        ? 'You are already in a challenge'
        : ''
    "
  >
    <span>Quit current challenge and start {{ challenge?.name }}</span>
  </button>

  <button
    nz-button
    nzSize="large"
    nzType="secondary"
    routerLink="/prestige"
    *ngIf="!noRoute"
  >
    <i nz-icon nzType="left"></i>
    <span>Back</span>
  </button>
</nz-button-group>
